<template>
  <div class="sidebar">
    <el-menu default-active="2" :collapse="isCollapse" class="el-menu-vertical" @select='handleSelect'>
      <div class="collapse-icon">
        <span>
          <i :class="collapseicon" @click="collapse"></i>
          <i class="el-icon-plus" v-show="!isCollapse & treeBtn" @click="treeVisible = true"></i>
          <router-link to="/">
            <i class="el-icon-back" v-show="!isCollapse">返回</i>
          </router-link>
        </span>
      </div>
      <!-- 为了收起侧边栏时文字隐藏 -->
      <template v-for="item in catalogs">
        <el-menu-item v-if="!item.children || !item.children.length" :key="item.id" :index="item.url">
          <i :class="item.icon"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
        <el-submenu v-else :key="item.id" :index="item.url">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </template>
          <navmenu :catalogs="item.children"></navmenu>
        </el-submenu>
      </template>
      <!-- 用下面代码 收起 侧边栏时 文字不会隐藏 其他功能正常 -->
      <!-- <navmenu :catalogs="catalogs"></navmenu> -->
    </el-menu>

    <el-dialog title="收货地址" :visible.sync="treeVisible" width="30%">
      <div class="buttons">
        <el-button @click="appendRoot">添加根节点</el-button>
      </div>
      <el-tree :data="catalogs" :props="defaultProps" node-key="id" default-expand-all highlight-current :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="text" size="mini" @click="() => append(data)">
              添加
            </el-button>
            <el-button type="text" size="mini" @click="() => remove(node, data)">
              删除
            </el-button>
          </span>
        </span>
      </el-tree>
    </el-dialog>
  </div>
</template>

<script>
import navmenu from "../common/Navmenu";
import { delCotolog } from "../../api";

let id = 1000;
export default {
  name: "mySidebar",
  components: {
    navmenu
  },
  data() {
    return {
      isCollapse: false,
      treeVisible: false, 
      defaultProps: {
        label: "name",
        children: "children"
      }
    };
  },
  computed: {
    treeBtn(){
      return this.$store.state.catalog.power != 'r';
    },
    catalogs() {
      return this.$store.state.catalog.catalogs;
    },
    collapseicon() {
      return this.isCollapse ? "el-icon-d-arrow-right" : "el-icon-d-arrow-left";
    }
  },
  methods: {
    appendRoot() {
      this.$prompt("请输入名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(({ value }) => {
        this.$store.dispatch("appendRoot", value);
      });
    },
    append(data) {
      this.$prompt("请输入名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(({ value }) => {
        this.$store.dispatch("append", { data: data, name: value });
      });
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      delCotolog(data.id, this.$store.state.catalog.projectId);
      children.splice(index, 1);
      console.log(node.parent);
      console.log(data);
    },
    handleSelect(index, indexPath) {
      this.$store.commit("setIndexPath", indexPath);
      this.$store.dispatch("loadDocument", index);
    },
    collapse() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>

<style scoped>
.sidebar {
  height: 100%;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}

.el-menu-vertical.el-menu--collapse {
  height: 100%;
}

.collapse-icon {
  border-bottom: solid 1px;
  height: 30px;
}

.collapse-icon > span {
  font-size: 30px;
  float: right;
  margin-right: 15px;
}
</style>

